import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import { Layout, Menu } from "antd";
import { UploadOutlined, BarChartOutlined } from "@ant-design/icons";
import TopologyBuilder from "./TopologyBuilder";
import NetworkMonitor from "./NetworkMonitor";

const { Header, Sider, Content } = Layout;

const NetworkSimulation = () => {
  return (
    <Router>
      <Layout style={{ minHeight: "100vh" }}>
        {/* 顶部导航栏 */}
        <Header style={{ color: "white", fontSize: "20px" }}>网络攻击仿真系统</Header>

        <Layout>
          {/* 左侧菜单 */}
          <Sider>
            <Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
              <Menu.Item key="1" icon={<UploadOutlined />}>
                <Link to="/topology-builder">拓扑构建</Link>
              </Menu.Item>
              <Menu.Item key="2" icon={<BarChartOutlined />}>
                <Link to="/network-monitor">网络监控</Link>
              </Menu.Item>
            </Menu>
          </Sider>

          {/* 主内容区域 */}
          <Content style={{ margin: "16px" }}>
            <Routes>
              <Route path="/topology-builder" element={<TopologyBuilder />} />
              <Route path="/network-monitor" element={<NetworkMonitor />} />
            </Routes>
          </Content>
        </Layout>
      </Layout>
    </Router>
  );
};

export default NetworkSimulation;
